<script setup lang="ts">
import { ref } from 'vue';
import { PropagandaInfoApi } from '@/api/propaganda-info';
import AuthBar from '@/components/authBar/index.vue';
import Empty from '@/components/empty/index.vue';
import { useRequest } from '@/hooks/useRequest';
import { isEmpty } from '@/utils/is.utils';
import CategorySearch from './components/categorySearch.vue';
import PostCard from './components/postCard.vue';

const searchValue = ref('');

const categoryVal = ref('');

const {
  data,
  runAsync: getPropagandaInfoList
} = useRequest(() => PropagandaInfoApi.getPropagandaInfoList(
  {
    contentTitle: searchValue.value,
    materialClass: categoryVal.value
  }
), {
  onBeforeRequest() {
    uni.showLoading({
      mask: true,
      title: '加载中...'
    });
  },
  onComplete() {
    uni.hideLoading();
  }
});
</script>

<template>
  <view class="page flex-col">
    <AuthBar back-home />
    <view class="flex-1 overflow-auto">
      <view class="search flex-center items-start">
        <view class="w-750 flex">
          <view class="relative mr-36 flex-1 self-start">
            <wd-input v-model="searchValue" placeholder="搜索宣教内容..." />
            <view class="search-btn">
              <wd-button @click="getPropagandaInfoList()">
                搜索
              </wd-button>
            </view>
          </view>
        </view>
      </view>

      <CategorySearch v-model="categoryVal" @change="getPropagandaInfoList" />

      <view v-if="!isEmpty(data)" class="mt-60 px-48">
        <view class="post-block">
          <view class="post-block__title">
            推荐阅读
          </view>
          <PostCard :data="data[0]" />
        </view>

        <view v-if="data.length > 1" class="post-block">
          <view class="post-block__hd flex items-center justify-between">
            <view class="post-block__title">
              最新文章
            </view>
            <view class="post-block__count">
              共{{ data.length - 1 }}篇文章
            </view>
          </view>
          <PostCard v-for="item in data.slice(1)" :key="item.id" :data="item" />
        </view>
      </view>

      <Empty v-else />
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '健康宣教',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  height: 100%;
  background: var(--bg-color);

  .search {
    padding: 38px 48px;
    --wot-input-inner-height: 68px;
    --wot-input-fs: 20px;
    --wot-input-placeholder-color: #767676;

    :deep(.wd-input) {
      border-radius: 8px;
      background: #eff5ff;
      border: 1px solid #ffffff;
      box-sizing: border-box;
      padding-left: 20px;

      &:after {
        background: transparent;
      }
    }

    .search-btn {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;

      :deep(.wd-button) {
        width: 98px;
        height: 100%;
        background: var(--primary);
        color: #fff;
        border-radius: 0px 6px 6px 0px;
        font-size: 26px;
      }
    }

    .select-arrow {
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .post-block {
    margin-bottom: 50px;

    .post-block__title {
      color: var(--text-color);
      font-size: 48px;
      font-weight: bold;
      margin-bottom: 38px;
    }

    .post-block__count {
      color: #686869;
      font-size: 28px;
    }
  }
}
</style>
